<template>
  <div id="addB">
    <div class="top">
      <p>收费管理/账单管路/新建账单</p>
      <h3>新建账单</h3>
    </div>
    <div class="bottom">
      <p>基础信息</p>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="项目名称">
          <el-input v-model="ruleForm.payItemForm" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="收费方式" prop="region">
          <el-select v-model="ruleForm.itemId" placeholder="请选择">
            <el-option v-for="v in way" :label="v.method" :value="v.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="收费仪表" prop="region">
          <el-select v-model="ruleForm.itemId" placeholder="请选择">
            <el-option v-for="v in shoufei" :label="v.service" :value="v.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="费用单价" prop="name">
          <el-input v-model="ruleForm.price" />元
        </el-form-item>
        <el-form-item label="计算公式" prop="name">
          <el-input v-model="ruleForm.formula" />元
        </el-form-item>
        <el-form-item label="计量单位" prop="unitId">
          <el-select v-model="ruleForm.unitId" placeholder="Activity zone">
            <el-option v-for="v in danwei" :label="v.unit" :value="v.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="计算精度" prop="accuracyId">
          <el-select v-model="ruleForm.accuracyId" placeholder="Activity zone">
            <el-option v-for="v in com" :label="v.accuracy" :value="v.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="滞纳金比例" prop="lateFee">
          <el-input v-model="ruleForm.lateFee" />
        </el-form-item>

        <el-form-item label="备注" prop="remarks">
          <el-input v-model="ruleForm.remarks" type="textarea" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="add()">确定生成账单</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import axios from "axios";
import { useRouter } from "vue-router";
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const size = ref<"" | "large" | "small">("");
const com = ref([{ id: 0, accuracy: "" }]);
const danwei = ref([{ id: 0, unit: "" }]);
const shoufei = ref([{ id: 0, service: "" }]);
const way = ref([{ id: "", method: "" }]);
const ruleForm = reactive({
  payItemForm: "",
  itemId: 0,
  price: 0,
  formula: "",
  unitId: 0,
  accuracyId: 0,
  lateFee: 0,
  remarks: "",
});
const router = useRouter();
const compute = () => {
  axios({
    url: "/accuracy/queryAccuracyAll",
  }).then(({ data }) => {
    if (data.code == "0") {
      com.value = data.data;
    }
  });
};
const servi = () => {
  axios({
    url: "/item/queryItemAll",
  }).then(({ data }) => {
    if (data.code == "0") {
      shoufei.value = data.data;
    }
  });
};
const unit = () => {
  axios({
    url: "/unit/queryUnitAll",
  }).then(({ data }) => {
    if (data.code == "0") {
      danwei.value = data.data;
    }
  });
};
const rnd = (m: number, n: number) => Math.floor(Math.random() * (n - m) + m);
const add = () => {
  axios({
    url: "/bill/addNo",
  }).then(({ data }) => {
    axios({
      url: "/bill/add",
      method: "post",
      data: {
        accuracyId: 0,
        code: 0,
        formula: "",
        id: 0,
        itemId: 0,
        lateFee: 0,
        methodId: 0,
        price: 0,
        remarks: "",
        unitId: 0,
      },
    }).then(({ data }) => {
      if (data.code == "0") {
        ElMessage.success("添加成功");
        router.push({ path: "/home/chargeM" });
      } else {
        ElMessage.error("添加失败");
      }
    });
  });
};
onMounted(() => {
  compute();
  servi();
  unit();
});
// const rules = reactive<FormRules>({
//   name: [
//     { required: true, message: "Please input Activity name", trigger: "blur" },
//     { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
//   ],
//   region: [
//     {
//       required: true,
//       message: "Please select Activity zone",
//       trigger: "change",
//     },
//   ],
//   count: [
//     {
//       required: true,
//       message: "Please select Activity count",
//       trigger: "change",
//     },
//   ],
//   date1: [
//     {
//       type: "date",
//       required: true,
//       message: "Please pick a date",
//       trigger: "change",
//     },
//   ],
//   date2: [
//     {
//       type: "date",
//       required: true,
//       message: "Please pick a time",
//       trigger: "change",
//     },
//   ],
//   type: [
//     {
//       type: "array",
//       required: true,
//       message: "Please select at least one activity type",
//       trigger: "change",
//     },
//   ],
//   resource: [
//     {
//       required: true,
//       message: "Please select activity resource",
//       trigger: "change",
//     },
//   ],
//   desc: [
//     { required: true, message: "Please input activity form", trigger: "blur" },
//   ],
// });
</script>
<style lang="less" scoped>
#addB {
  background: #f0f2f5;
  height: 100%;
  .top {
    width: 90%;
    height: 80px;
    margin: 20px auto;
    padding: 15px 0 5px 30px;
    margin: 10px auto;
    background: white;
  }
  .bottom {
    width: 90%;
    background: white;
    height: 100%;
    margin: 10px auto;
    padding: 15px 0 5px 30px;
    .el-form {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .el-input,
    .el-textarea,
    .el-select,
    :deep(.demo-date-picker) {
      width: 300px;
    }
  }
}
</style>
